本系列文以製作專案為主軸，紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分，有覺得不明確的地方還請留言多多指教。

要在React中使用Bootstrap套件，可以像一般安裝一樣，在index.html引入css跟scripts，然後在dom的class上代入關鍵字使用，不過另一個比較推薦的選擇是使用React Bootstrap，這個套件把Bootstrap components全部重製成React component的模式，讓人不另外載入script或jquery，用加載React component的方式就能使用。

不過React bootstrap就只有component功能而已，style的部分要另外從bootstrap載入。

建立看板部件

在開始使用前先把App架構整理一下，建立看板基礎的component。
把App.js裡的JSX清理到剩下根部件。

function App() {
  return (
    <div className="App"></div>
  );
}

然後在src底下建一個components資料夾，之後建立的React components就放這。

在components資料夾底下建立KanBan.jsx

這裡有兩點筆記:

1. 副檔名用.jsx或.js其實對編譯沒有差別，只是一般建議有用到JSX的話副檔名用.jsx，純javascript用.js。
2. React component的字首必須是大寫，字首小寫會被判定成原生html標籤。

在KanBan裡寫入

// KanBan.jsx
import React from "react"; //要載入react，JSX才能被編譯

export default function KanBan() {
  return <div>Hello world!</div>;
}

這樣就做成一個最基本的 function component，然後到App.js裡掛載:

// App.js
import React from "react";
import KanBan from "./components/KanBan"; //載入component

function App() {
  return (
    <div className="App">
      <KanBan/> //把component掛到App底下
    </div>
  );
}

export default App;

在 http://localhost:3000/ 上就能看到 Hello world! 了。

安裝 React bootstrap

安裝套件指令:

npm install react-bootstrap bootstrap

雖然上一篇已經裝過bootstrap了，不過為展示完整的React bootstrap安裝方式這裡還是加進來。

使用 React bootstrap

React bootstrap 提供的就是一個個component，使用時就像一般加載component一樣。

這邊先直接使用Navbar範例:

//KanBan.jsx
import React from "react";
import {
 Navbar,
 Nav,
 NavDropdown,
 Form,
 FormControl,
 Button,
} from "react-bootstrap";//導入需要的component

export default function KanBan() {
 return (//以下整個是官網的NavBar範例
   <Navbar bg="light" expand="lg">
     <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
     <Navbar.Toggle aria-controls="basic-navbar-nav" />
     <Navbar.Collapse id="basic-navbar-nav">
       <Nav className="mr-auto">
         <Nav.Link href="#home">Home</Nav.Link>
         <Nav.Link href="#link">Link</Nav.Link>
         <NavDropdown title="Dropdown" id="basic-nav-dropdown">
           <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
           <NavDropdown.Item href="#action/3.2">
             Another action
           </NavDropdown.Item>
           <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
           <NavDropdown.Divider />
           <NavDropdown.Item href="#action/3.4">
             Separated link
           </NavDropdown.Item>
         </NavDropdown>
       </Nav>
       <Form inline>
         <FormControl type="text" placeholder="Search" className="mr-sm-2" />
         <Button variant="outline-success">Search</Button>
       </Form>
     </Navbar.Collapse>
   </Navbar>
 );
}

畫面:

以往用class定義的bootstrap component改為載入React component後寫在JSX中，而相關的事件像是展開collapse，也都已經寫在這些component裡了，不用載入另外的script。

一定要先導入需要的Component不然JSX可不認得這些tag。

另外像是排版用的container,row,col也都是component:

<Container>
  <Row>
    <Col>1 of 1</Col>
  </Row>
</Container>

調整col寬度的方式是用代入props的方式做成:

<Container>
  <Row>
    <Col sm={8}>sm=8</Col>
    <Col sm={4}>sm=4</Col>
  </Row>
</Container>

這邊sm是視窗寬度的標籤，就像原生Bootstrap一樣有五個大小(xs, sm, md, lg, xl)，所以可以在不同視窗寬度下指定不同的大小。

另外offset、order等一些屬性也是用props帶入，不過不是全部的屬性都有，像是置中還是要用class的方式代入:

<Container>
  <Row className="justify-content-center"> //水平置中
    ...
  </Row>
</Container>

這邊只列舉一些React Bootstrap與原生Bootstrap使用上不同的部分，
詳細還是要根據每個component參照範例使用。

題外話

從範例可以看到像是

 <Navbar.Collapse id="basic-navbar-nav">

這樣帶點的標籤，這是方便把一組Component打包成一個，import時只要寫一行的方法，簡單例子:

// Text.jsx

import React from "react";

//分別定義兩個Component
const Sub = () => {
  return <div>TestSub</div>;
};

const Main = () => {
  return <div>Test</div>;
};

Main.Sub = Sub; //定義子組件

export default Main;

// App.jsx

import React from "react";
import Main from "./components/Test";

function App() {
  return (
    <div className="App">
      <>
        <Main></Main>
        <Main.Sub></Main.Sub>//呼叫子組件
      </>
    </div>
  );
}

export default App;

畫面:

子組件不一定要寫在主組件中，也能在主組件import子組件後再定義

import React from "react";
import Sub from "./Sub.jsx"

const Main = () => {
  return <div>Test</div>;
};

Main.Sub = Sub;

export default Main;

References:

• Navbars - React Bootstrap
• Grid - React Bootstrap
• React Component with Dot Notation - Risan Bagja Pradana